<template>
  <div class="register-container">
    <dv-full-screen-container>
      <div class="register-box">
        <dv-border-box-8 class="form-box">
          <div class="header-title">
            <dv-decoration-3 style="width:40px;height:15px;" />
            <div class="title-text">用户注册</div>
            <dv-decoration-3 style="width:40px;height:15px;" />
          </div>
          <div class="register-form">
            <div class="form-item">
              <div class="item-label">用户名</div>
              <div class="item-input">
                <input type="text" v-model="registerForm.username" placeholder="请输入用户名">
              </div>
            </div>
            <div class="form-item">
              <div class="item-label">密码</div>
              <div class="item-input">
                <input type="password" v-model="registerForm.password" placeholder="请输入密码">
              </div>
            </div>
            <div class="form-item">
              <div class="item-label">确认密码</div>
              <div class="item-input">
                <input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码">
              </div>
            </div>
            <div class="form-item button-group">
              <button class="register-btn" @click="handleRegister">注 册</button>
              <button class="back-btn" @click="goToLogin">返回登录</button>
            </div>
          </div>
        </dv-border-box-8>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
import { ElMessage } from 'element-plus'

const router = useRouter()
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

const handleRegister = async () => {
  try {
    // 表单验证
    if (!registerForm.username || !registerForm.password || !registerForm.confirmPassword) {
      ElMessage({
        message: '所有字段都必须填写',
        type: 'warning',
        duration: 2000
      })
      return
    }
    
    if (registerForm.password !== registerForm.confirmPassword) {
      ElMessage({
        message: '两次输入的密码不一致',
        type: 'warning',
        duration: 2000
      })
      return
    }

    const response = await post('/user/register', {
      username: registerForm.username,
      password: registerForm.password
    })

    if (response.success) {
      ElMessage({
        message: '注册成功，即将跳转到登录页',
        type: 'success',
        duration: 2000
      })
      setTimeout(() => {
        router.push('/login')
      }, 2000)
    } else {
      ElMessage({
        message: '注册失败：' + (response.message || '未知错误'),
        type: 'error',
        duration: 2000
      })
    }
  } catch (error) {
    ElMessage({
      message: '注册出错：' + (error.response?.data || error.message || '未知错误'),
      type: 'error',
      duration: 2000
    })
  }
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.register-container {
  width: 100%;
  height: 100vh;
  color: #fff;
  background: url('@/assets/images/back.png') no-repeat center center;
  background-size: cover;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .register-box {
    position: relative;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;

    .form-box {
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);

      .header-title {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-bottom: 50px;

        .title-text {
          font-size: 20px;
          color: #03d3ec;
          white-space: nowrap;
          margin: 0 10px;
        }
      }

      .register-form {
        width: 80%;
        margin: 0 auto;

        .form-item {
          margin-bottom: 30px;

          .item-label {
            font-size: 16px;
            color: #03d3ec;
            margin-bottom: 10px;
          }

          .item-input {
            input {
              width: 100%;
              height: 40px;
              background: rgba(3, 211, 236, 0.1);
              border: 1px solid #03d3ec;
              border-radius: 4px;
              color: #fff;
              padding: 0 15px;
              font-size: 14px;
              outline: none;

              &::placeholder {
                color: rgba(255, 255, 255, 0.3);
              }

              &:focus {
                border-color: #03d3ec;
                box-shadow: 0 0 5px rgba(3, 211, 236, 0.5);
              }
            }
          }

          &.button-group {
            display: flex;
            gap: 20px;
            justify-content: space-between;
          }

          .register-btn, .back-btn {
            flex: 1;
            height: 40px;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              opacity: 0.9;
              transform: translateY(-1px);
            }

            &:active {
              transform: translateY(1px);
            }
          }

          .register-btn {
            background: linear-gradient(45deg, #03d3ec, #03a9f4);
            border: none;
          }

          .back-btn {
            background: transparent;
            border: 1px solid #03d3ec;
            color: #03d3ec;

            &:hover {
              background: rgba(3, 211, 236, 0.1);
            }
          }
        }
      }
    }
  }
}
</style> 